import React, { Component } from 'react';
import { SearchBar, List, Button, WhiteSpace, WingBlank } from 'antd-mobile';
import router from 'umi/router';
import styles from './index.less';
import { fetchApi } from '@/utils/utils';
const Item = List.Item;

class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      videoList: [],
    };
  }
  onChange = e => {
    this.setState({
      value: e,
    });
    this.searchList(e);
  };

  onCancel = e => {
    this.setState({
      videoList: [],
    });
  };
  searchList = async title => {
    let res = await fetchApi(`web/search?title=${title}`, {
      method: 'get',
    });
    if (res.status === 0) {
      this.setState({
        videoList: (res.data && res.data.list) || [],
      });
    }
  };

  goToDetail = i => {
    console.log(i, 'i');
    router.push({
      pathname: '/videoDetail',
      query: {
        id: i.id,
      },
    });
  };

  render() {
    const { videoList } = this.state;
    return (
      <div>
        <div className="search-wrap">
          <SearchBar
            placeholder="自动获取光标"
            onCancel={this.onCancel}
            onChange={this.onChange}
            ref={ref => (this.autoFocusInst = ref)}
          />
        </div>
        <div>
          <List renderHeader={() => `搜索到${videoList.length}条视频`}>
            {videoList.length > 0
              ? videoList.map(i => {
                  return (
                    <Item
                      thumb={i.imgUrl}
                      key={i.id}
                      arrow="horizontal"
                      onClick={() => {
                        this.goToDetail(i);
                      }}
                    >
                      <div className="video-list-item">
                        <span>{i.title}</span>
                        <span className="video-list-item-hot">热度{i.playNumber || 0}</span>
                      </div>
                    </Item>
                  );
                })
              : ''}
          </List>
        </div>
      </div>
    );
  }
}

export default Search;
